<template>
  <div class="app-container">
    <div class="page-header">
      <!-- <router-link class="back-link" to="/main/renshi/renshizhidu/yfrsyidong/yfrsyidong">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link> -->
      <div class="left-buttons">
        <el-button
          type="primary"
          icon="el-icon-back"
          @click="goBack"
          class="back-button"
          >返回</el-button
        >
      </div>
      &emsp;
      <h2>人事档案 注销/报废 申请表列表</h2>
    </div>
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="right-buttons">
        <el-input
          v-model="listQuery.employeeName"
          placeholder="员工姓名"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.employeeNumber"
          placeholder="员工工号"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >
          搜索
        </el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          @click="handleCreate"
        >
          新增
        </el-button>
        <el-button
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          @click="handleBatchDelete"
        >
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="事业部" prop="businessUnit" min-width="120" />
      <el-table-column label="部门" prop="department" min-width="120" />
      <el-table-column label="姓名" prop="employeeName" min-width="100" />
      <el-table-column label="性别" prop="gender" min-width="60" />
      <el-table-column label="工号" prop="employeeNumber" min-width="100" />
      <el-table-column label="入职日期" min-width="100">
        <template slot-scope="{ row }">
          {{ row.entryDate | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="离职日期" min-width="100">
        <template slot-scope="{ row }">
          {{ row.leaveDate | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="离职类别" prop="leaveType" min-width="100" />
      <el-table-column label="工作年限" prop="workYears" min-width="100" />
      <el-table-column label="操作" align="center" min-width="230">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleView(row)">
            查看
          </el-button>
          <el-button type="success" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  getArchiveCancelPage,
  deleteArchiveCancel,
  batchDeleteArchiveCancel,
} from "@/api/archiveCancel";
import Pagination from "@/components/Pagination";

export default {
  name: "ArchiveCancelList",
  components: { Pagination },
  filters: {
    formatDate(date) {
      if (!date) return "";
      return new Date(date).toLocaleDateString();
    },
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        employeeName: undefined,
        employeeNumber: undefined,
      },
      selectedRows: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    goBack() {
      this.$router.push("/main/renshi/renshizhidu/rsdazhuxiao/rsdazhuxiao");
    },
    getList() {
      this.listLoading = true;
      getArchiveCancelPage(this.listQuery).then((response) => {
        this.list = response.data.data.records;
        this.total = response.data.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleCreate() {
      this.$router.push({
        path: "/main/renshi/renshizhidu/rsdazhuxiao/rsdazhuxiao",
        query: { type: "create" },
      });
    },
    handleView(row) {
      this.$router.push({
        path: "/main/renshi/renshizhidu/rsdazhuxiao/rsdazhuxiao",
        query: { type: "view", id: row.id },
      });
    },
    handleUpdate(row) {
      this.$router.push({
        path: "/main/renshi/renshizhidu/rsdazhuxiao/rsdazhuxiao",
        query: { type: "edit", id: row.id },
      });
    },
    handleDelete(row) {
      this.$confirm("确认删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteArchiveCancel(row.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
      });
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    handleBatchDelete() {
      if (this.selectedRows.length === 0) {
        this.$message({
          message: "请选择要删除的记录",
          type: "warning",
        });
        return;
      }
      this.$confirm("确认删除选中的记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const ids = this.selectedRows.map((row) => row.id);
        batchDeleteArchiveCancel(ids).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
      });
    },
  },
};
</script>

<style scoped>
.app-container {
  /* 容器样式 */
  padding: 20px;
  /* background-color: #f5f7fa; */
  border-radius: 8px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  min-height: calc(100vh - 40px);
  width: 1200px;
  margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 3px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 返回链接样式 */
.back-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #409eff;
  font-size: 16px;
  margin-right: 20px;
  transition: all 0.3s;
}

.back-link i {
  margin-right: 5px;
}

.back-link:hover {
  opacity: 0.8;
}

/* 标题样式 */
.page-header h2 {
  margin: 0;
  font-size: 1.2em;
  font-weight: 500;
  color: #303133;
}

.toolbar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  align-items: center;
}

/* 
.left-buttons {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
} */

.back-button {
  margin-right: 10px;
}

.right-buttons {
  /* margin-left: auto; */
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-item {
  margin-right: 10px;
}
</style>